<template>
    <el-container style="padding: 0 200px;">
        <el-aside class="gaside" style="width: 160px;height: 500px;">
            <h4>商品分类</h4>
            <ul>
                <li><a href="/front/drug/1">感冒药</a></li>
                <li><a href="/front/drug/2">抗生素</a></li>
                <li><a href="/front/drug/3">维生素</a></li>
                <li><a href="/front/drug/4">消化药</a></li>
                <li><a href="/front/drug/5">心脏药</a></li>
                <li><a href="/front/drug/6">止痛药</a></li>
            </ul>
        </el-aside>
        <el-main style="padding: 0;">
            <el-row>
                <el-col :span="24" class="pd15" v-if="drugLsit.length == 0">
                    <div style="background-color: white;height: 500px;">
                        <el-empty description="暂无数据"></el-empty>
                    </div>
                </el-col>
                <el-col v-if="drugLsit.length != 0" :span="8" class="pd15" v-for="item in drugLsit">
                    <div style="background-color: white;">
                        <div class="grid-content ">
                            <el-image style="" :src="getImage(item.img)" fit></el-image>
                        </div>
                        <div style="font-weight: 500;text-align: center;">{{ item.drugName }}</div>
                        <div style="font-size: 18px;font-weight: 300;text-align: center;padding:15px 0px ;">￥{{ item.price }}</div>
                        <div style="text-align: center;padding-bottom: 20px;">
                            <el-button type="success" @click="goDetail(item.drugId)">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon--shangpinxiangqing-gai"></use>
                                </svg>详情
                            </el-button>
                            <el-button type="success" @click="addShopCart(item.drugId)">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-ic_jiarugouwuche"></use>
                                </svg>加入购物车
                            </el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row v-if="drugLsit.length != 0">
                <el-col :span="24">
                    <el-pagination align="center"  layout="prev, pager, next" :total="total"
                        @current-change="handleCurrentChange" :current-page="page" :page-size="pageSize">
                    </el-pagination>
                </el-col>

            </el-row>

        </el-main>
    </el-container>
</template>
<script>
export default {
    name: "Drug",
    data() {
        return {
            drugTypeId: 0,
            drugLsit: [],
            total: 0,
            page: 1,
            pageSize:6,
            imageUrl: '',
            num: null
        }
    },
    mounted() {
        this.drugTypeId = this.$route.params.drugTypeId;
        this.getDrugList();

    },
    methods: {
        goDetail(id) {//跳转商品详情
            console.log("当前的id==>" + id)
            this.$router.push(`/front/detail/${id}`)
        },
        jumpIndexGoodList() {//首页
            this.page = 1;
            this.getDrugList();
        },
        jumpLastGoodList() {//尾页
            this.page = Math.ceil(this.total / 6);
            this.getDrugList();
        },
        getImage(image) {//图片回传显示
            return "http://localhost:8081/common/download?name=" + image
        },
        getDrugList() {//获取商品列表
            this.request("/drug/FrontPage", {
                params: {
                    page: this.page,
                    pageSize: 6,
                    typeId: this.drugTypeId,
                }
            }).then(res => {
                if (res.code == 200) {
                    console.log("此时res", res.data)
                    this.drugLsit = res.data.records
                    console.log("此时goodList" + this.drugLsit.length)
                    this.total = res.data.total
                }
            })
        },
        handleCurrentChange(page) {//分页页码选择
            console.log(page)
            this.page = page;
            this.getDrugList();
        },
        //加入购物车按钮
        addShopCart(drugId) {
            var shopCart = {}
            shopCart.customerId = JSON.parse(localStorage.getItem("customer")).id
            shopCart.drugId = drugId
            shopCart.count = 1
            console.log("当前durugId=>",drugId)
            this.request.post("/shopcart/addShopCart", shopCart).then(res => {
                if (res.code == 200) {
                    this.$message.success("加入购物车成功!!!")
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.bgB {
    background-color: #eeeeee;
}

.pd15 {
    padding: 0 15px 20px 15px;
}

.fbtn {
    background-color: blue;

}

.lbtn {
    background-color: blue;
    margin-right: 200px;
}

.icon {
    font-size: 20px;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    margin-right: 5px;
}

.gaside {
    background-color: white;

    h4 {
        padding: 20px 0px 20px 30px;
        background-color: #f5f5f5;
        border: 1px solid rgba(0, 0, 0, 0.07);
        margin: 0;
    }

    ul {
        padding: 0;
        text-align: center;
    }

    ul li {
        list-style: none;
        padding: 15px;
    }

    ul li:hover {
        background-color: #eeeeee;
    }

    a {
        text-decoration: none;
        color: black;
    }


}

/* .fbtn {
    background-color: blue;
    margin-left: -155px
}

.lbtn {
    background-color: blue;
    margin-left: 95px;
}

.icon {
    font-size: 20px;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    margin-right: 5px;
}

.box {
    padding: 0px 0px 20px 0px;
    width: 253px;
    text-align: center;
    background-color: white;
    /* border: 1px solid black; */
//     margin-right: 50px;
//     margin-bottom: 20px;
// }

// .gright {
//     width: 65vw;

//     flex-wrap: wrap;
//     margin: 20px 0px 0px 450px;
//     display: flex;
// }



// ul li a {
//     text-decoration: none;
//     color: black;
// }

// ul li:hover {
//     background-color: #eeeeee;
// }

// ul li {
//     list-style: none;
//     height: 40px;
//     line-height: 40px;
//     padding: 0 1.5rem;
//     font-size: 14px;
// }

// .spfl {
//     font-weight: 500;
//     line-height: 40px;
//     font-size: 1.1em;
//     background-color: rgba(0, 0, 0, 0.03);
//     padding: 0.75rem 2rem;
//     border-bottom: 1px solid rgba(0, 0, 0, 0.07);
// }

// .zuo {
//     width: 230px;
//     margin: 0px 20px 20px 200px;
//     background-color: white;
//     float: left;
//     text-align: left;
//     box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
//     height: 600px;
// } */
</style>